<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>双向绑定1</title>
    <script src="angularjs/angular.min.js"></script>
    <link rel="stylesheet" href="bootstrap.min.css"/>
    <script src="jquery-1.11.1.js"></script>
    <style>
        .show{
            display: block;
        }
        .hideMe{
            display: none;
        }
    </style>
</head>
<body ng-app="doraApp" style="padding: 20px;">
    <div ng-controller="postCtrl" class="panel panel-default">
        <header class="panel-heading">Post Add</header>
        <div class="panel-body">
            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email title</label>
                    <input class="form-control" ng-model="title" id="exampleInputEmail1" placeholder="Enter title">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Email Content</label>
                    <textarea class="form-control" ng-model="content" name="" id="" cols="30" rows="10" id="exampleInputPassword1" placeholder="Email Content"></textarea>
                </div>

                <button type="button" class="btn btn-default" ng-click="addList()">Add List</button>
            </form>
        </div>
        <div class="list-group">
            <a href="#" class="list-group-item" ng-repeat="post in posts">

                <h4 class="list-group-item-heading">{{post.title}}</h4>
                <p class="list-group-item-text">{{post.content}}</p>
                <button type="button" class="btn btn-primary" ng-click="edit($index)">Update</button>
                <button type="button" class="btn btn-warning" ng-click="del($index)">Delete</button>
            </a>
        </div>
    </div>

    <div class="panel-body newDialog" class="hideMe" id="{{'model'+$index}}">
        <form>
            <div class="form-group">
                <label >Email title</label>
                <input class="form-control" ng-model="utitle" placeholder="Enter title">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Email Content</label>
                <textarea class="form-control" ng-model="ucontent" name="" cols="30" rows="10" placeholder="Email Content"></textarea>
            </div>

            <button type="button" class="btn btn-default" ng-click="update()">Add List</button>
        </form>
    </div>

    <script>
        angular.module("doraApp",[])
                .controller("postCtrl", function ($scope) {
                    $scope.posts = [];

                    $scope.addList = function () {
                        console.log($scope.title);
                        $scope.posts.push({title:$scope.title,content:$scope.content});
                        $scope.title = "";
                        $scope.content = "";
                    }



                    $scope.edit = function (index) {

                        $("#model"+index).show();

                    }

                    $scope.del = function (index) {
                        $scope.posts.splice(index,1)
                    }
                })


    </script>
</body>
</html>